<template>
  <div class="xiaohai-container" style="background-color: #efefef;margin-top: 10px;">
    <div id="rule-tea">
      <div class="left"></div>
      <ul>
        <li class=""><a href="?tag=">全部</a></li>
        <li class=""><a href="?tag=jl">交流</a></li>
        <li class=""><a href="?tag=dhzx">动画资讯</a></li>
        <li class=""><a href="?tag=qtzx">其他资讯</a></li>
        <li class=""><a href="?tag=fdsw">茶会事务</a></li>
      </ul>

      <div class="all_rule">
        <h2>论坛bug反馈&建议(仮)</h2>
        <p>如图说明：</p>
        <p>第一 本帖回复需与论坛bug，系统错误，建议有关，无关内容会被删帖，请勿在此水帖；</p>
        <p></p>
        <p></p>
      </div>
    </div>

    <teaItem :teaListData="TeaList.data"></teaItem>


    <div class="block pagelist">
      <span class="demonstration">大于 7 页时的效果</span>
      <el-pagination
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    import teaItem from '../../components/tea/teaItem.vue';
    import Mock from 'mockjs';
    const ERROR = 0;
    export default {
      data() {
        return {
          TeaList: {}
        }
      },
      created() {
        window.addEventListener('scroll', this.waterfull);
        this.$http.get('http://rapapi.org/mockjs/17725/api/tea?accessToken=sss').then((response) => {
          response = response.body;
          if (Mock.mock(response).errno === ERROR) {
            this.TeaList = Mock.mock(response);
            console.log(this.TeaList)
          }

        });
      },
      components:{
        teaItem
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">


  #rule-tea {
    width: 1160px;
    height: 450px;
    margin: 0 auto;
    background: url(../../assets/part-banner.png);
  }
  #rule-tea .left {
    width: 50%;
    height: 100%;
    float: left;
  }
  #rule-tea ul {
    margin: 20px 20px 0 0;
    width: 456px;
    height: 86px;
    float: right;
  }
  #rule-tea li a {
    color: black;
  }
  #rule-tea li {
    float: left;
    padding: 5px 20px 20px 20px;
    font-size: 16px;
    text-align: center;
    &.active a{
      color: rgba(255, 106, 0, 0.82);
    }
  }

  #rule-tea .all_rule {
    width: 450px;
    height: 200px;
    box-sizing: border-box;
    padding: 10px 20px 10px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    margin: 24px 0 0 118px;
    float: left;
  }
  #rule-tea .all_rule h2 {
    text-shadow: none;
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  #rule-tea .all_rule p {
    color: #fff;
  }


</style>
